const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry:{
        main:'./src/index.js'
    },
    mode:'development',
    devtool:"clean-module-eval-source-map",//开发环境
    devServer:{
        contentBase:'./dist',
        open:true,
        // host:'0.0.0.0',
        port:8080,
        hot:true
    },
    module:{//配置第三放规则
        rules:[
            { 
                //babel第三方模块 ： ES6 - ES5语法的转换，针对低级浏览器
                test: /\.js$/, 
                //忽略该目录下的.js文件，打包速度更快
                //因为该目录下的js已经打包好了，没必要再去分析
                exclude: /node_modules/, 
                //配置放在根目录下面  .babelrc
                loader: 'babel-loader',
                // options:{
                //     presets:[["@babel/preset-env",{
                //         useBuiltIns:'usage'
                //     }]]
                // }
                },
            //CSS规则
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            //less
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            //scss
            {
                test:/\.scss$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            //图片路径的loader
            {
            test: /\.(png|jpg|gif)$/i,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name:'[hash:8]-[name].[ext]',
                        fallback: require.resolve('file-loader'),
                        quality: 85,
                        limit:8000
                    }
                }]
            },
            //字体文件规则
            {
                test:/\.(ttf|eot|svg|woff|woff2)$/,
                use:{
                    loader:'url-loader'
                }
            },
            //Vue规则
            {
                test: /\.vue$/,
                loader: 'vue-loader'
              }
        ]
    },
    resolve:{
        alias:{
            //修改 vue 导入包的路径
            // "vue$":"vue/dist/vue.js"
        }
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'src/index.html'//指定模板文件路径
        }),
        new VueLoaderPlugin()
    ],
    output:{
        filename:'[name].js',
        path:path.resolve(__dirname,'dist')
    }
}